<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Sidebar - ESUI Demo</title>
        <script src="assets/loader/esl.js"></script>
        
        <script src="assets/jquery-1.9.1.min.js"></script>
        <script src="assets/demo.js"></script>
        <script src="assets/prism.js"></script>
        <!--[if lt IE 9]>
        <script src="http://xy3.baidu.com/js/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" href="assets/prism.css" />
        <link rel="stylesheet" href="assets/demo.css" />
        <link rel="stylesheet" href="assets/themes/standard.css" />
    </head>
    <body>
        <header>Sidebar</header>
        <div class="container">
            <h3>普通</h3>
            <button id="btn">changeMode</button>
            <button id="btn1">setContent</button>
            <div class="main" style="border-top: 1px solid #666;margin-top:10px">
                <esui-nav data-ui="id:mySide;mode:autohide">
                    <div>我的标题</div>
                    <div>
                        <div data-ui-type="Tree" data-ui-id="testTree"></div>
                    </div>
                </esui-nav>
                <div id="neighbor" style="height:900px;background:#f7f7f7;border:1px solid #999;padding:10px;margin-top:10px" class="ui-nav-neighbor-hide">
                    <ul id="navigator">
                    </ul>
                </div>
            </div>
        </div>
    <script>
        require(
            [
                'esui',
                'esui/Tree',
                'esui/TreeStrategy',
                'esui/Link',
                'esui/Sidebar'
            ],
            function (ui ,Tree , TreeStrategy, Link) {
                var lib = require('esui/lib');
                var datasource = {
                    id: '1',
                    text: '百度',
                    children:[
                        {
                            id: '2',
                            text: '联盟研发部',
                            children: [
                                { id: '21', text: 'RD' },
                                { id: '21', text: 'FE' },
                                { id: '21', text: 'QA' },
                                { id: '21', text: 'PM' }
                            ]
                        },
                        {
                            id: '3',
                            text: '贴吧事业部',
                            children: [
                                { id: '31', text: 'RD' },
                                { id: '31', text: 'FE' },
                                { id: '31', text: 'QA' },
                                { id: '31', text: 'PM' }
                            ]
                        },
                        {
                            id: '4',
                            text: '一半吃肉一般吃素部'
                        }
                    ]
                };
                ui.init(document.body, {
                    properties: {
                        testTree: {
                            datasource: datasource,
                            strategy: new TreeStrategy()
                        }
                    }
                });

                ui.get( 'mySide' ).onmodechange = function (e) {
                    if (e.mode == 'fixed') {

                        document.getElementById('neighbor').className = 'ui-nav-neighbor';
                    } else {

                        document.getElementById('neighbor').className = 'ui-nav-neighbor-hide';
                    }
                    console.info('onmodechange');
                };

                ui.get( 'mySide' ).onresize = function () {
                    console.info('onresize');
                };

                document.getElementById('btn').onclick = function () {
                    var mode = ui.get('mySide').getMode();
                    var curMode = mode == 'fixed' ? 'autohide' : 'fixed';
                    ui.get('mySide').setMode(curMode);
                }
                document.getElementById('btn1').onclick = function () {
                    var side = ui.get('mySide');

                    side.setContent('<a data-ui-type="Link" data-ui-href="http://www.baidu.com" data-ui-target="_blank">www.baidu.com</a>');
                }
            }
        );
        </script>
    </body>
</html>
